<template>
  <BasicTable @register="registerTable" :showIndexColumn="false">
  </BasicTable>
</template>
<script lang="ts" setup>
import { BasicColumn, BasicTable, useTable } from '@/components/Table';
// import {getCustomHeaderColumns} from './tableData';
import { onMounted, reactive } from "vue";
import { getYoyData } from '@/api/dataReport/deviceParamReport'
import { calculateIndexColumn } from '@/utils/tableUtil'

const [registerTable, { setColumns, setTableData, setLoading }] = useTable({
  title: '本周期数据同比',
  pagination: false,
});
onMounted(() => {
  setLoading(true)
})
/**
 * 格式化后台返回值
 * @param percentDataList1
 */
function getRatioValue(percentDataList1) {
  const percentDataList: any[] = reactive([]);
  for (const percentDataListElement of percentDataList1) {

    percentDataListElement.dataMap.classifyName = percentDataListElement.classifyName;
    percentDataListElement.dataMap.itemName = percentDataListElement.itemName;

    percentDataList.push(percentDataListElement.dataMap);
  }
  return percentDataList;
}

function getRatioCustomHeaderColumnsV(dateTimeList): BasicColumn[] {
  const columns: any[] = reactive([]);

  let result1 = reactive<Recordable>({});
  result1.title = '设备名称';
  result1.dataIndex = 'classifyName';
  result1.width = 120;
  columns.push(result1)

  let result2 = reactive<Recordable>({});
  result2.title = '数据周期';
  result2.dataIndex = 'itemName';
  result2.width = 120;
  columns.push(result2)
  for (let i = 0; i < dateTimeList.length; i++) {
    const percentDataListElement = dateTimeList[i];

    let result = reactive<Recordable>({});
    result.title = percentDataListElement;
    result.dataIndex = percentDataListElement;
    result.width = 120;
    columns.push(result);
  }

  return columns;
}

const setDeviceParamReport = (a, b) => {

  const title = getRatioCustomHeaderColumnsV(a);
  setColumns(title);

  const percentDataList = getRatioValue(b);
  setTableData(percentDataList);
}


const formatHeader = (headerData, tableData) => {
  const headerList = headerData.map(item => ({
    title: item,
    dataIndex: item,
    width: 100
  }))
  headerList.unshift(
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   width: 60,
    //   fixed: 'left',
    //   merge: true,
    // },
    {
      title: '设备名称',
      dataIndex: 'classifyName',
      width: 120,
      fixed: 'left',
      merge: true,
    }, {
    title: '项目',
    dataIndex: 'itemName',
    width: 120,
    fixed: 'left'
  })
  headerList.push({
    title: '总计',
    dataIndex: 'totalCount',
    width: 120,
    fixed: 'right'
  })
  // const mergedColumns = getMergedColumns(headerList, tableData);
  setColumns(headerList);
}

const formatTableData = (tableData) => {
  const data = tableData.map((item, index) => {
    const { dataMap, ...others } = item
    return {
      ...dataMap, ...others
    }
  })
  const newData = calculateIndexColumn(data, 'classifyName')
  setTableData(newData)
  return newData
}

const setData = (header, tableData) => {
  const formatData = formatTableData(tableData)
  formatHeader(header, formatData)
}

const getData = (searchInfo) => {
  setLoading(true)
  getYoyData(searchInfo).then(res => {
    setData(res.dateTimeList, res.dataVoList)
  }).catch(e => {
    setData([], [])
  }).finally(() => {
    setLoading(false)
  })
}

defineExpose({
  getData,
  setDeviceParamReport
})

</script>
